interface HeroLink {
  href: string
  pointer: string
  className: string
}

interface HeroProps {
  imgProps: { src: string; alt: string }
  title: string & JSX.Element
  text: string
  links?: HeroLink[]
}

export const Hero: React.FC<HeroProps> = ({ imgProps, links, text, title }) => {
  return (
    <>
      <h2 className="mt-12 text-5xl leading-12 md:leading-none md:text-7xl text-center text-red-700 font-black tracking-tight px-8">
        {title}
      </h2>
      <div
        className="mt-12 bg-red-800"
        style={{
          backgroundImage:
            "url('/images/logo-outline.svg'), linear-gradient(#682712, #84331b)",
          backgroundSize: 'cover',
          backgroundPosition: '50% 50%',
        }}
      >
        <div className="lg:flex lg:items-center max-w-screen-xl mx-auto px-8 py-12 md:pt-8 md:pb-12">
          {imgProps?.src && (
            <div className="hidden lg:block lg:w-1/3 pl-4 text-center">
              <div className="w-3/5 mx-auto">
                <img alt={''} {...imgProps} className="" />
                <svg
                  viewBox="0 0 1000 218"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="fill-current text-white "
                >
                  <path d="M30.2833 95.89H40.0521C49.6255 95.89 56.6916 94.2876 61.2504 91.083C65.8091 87.8783 68.0885 82.8424 68.0885 75.9752C68.0885 69.1735 65.744 64.3337 61.055 61.4561C56.4311 58.5784 49.2347 57.1396 39.4659 57.1396H30.2833V95.89ZM30.2833 120.612V175.647H0V32.2216H41.6151C61.0224 32.2216 75.3826 35.786 84.6955 42.9148C94.0084 49.9781 98.6649 60.7367 98.6649 75.1904C98.6649 83.6272 96.3529 91.1484 91.729 97.7539C87.1051 104.294 80.56 109.428 72.0937 113.156C93.5851 145.399 107.587 166.229 114.1 175.647H80.4949L46.4018 120.612H30.2833Z" />
                  <path d="M157.875 85.1968C151.558 85.1968 146.608 87.2243 143.026 91.2792C139.444 95.2686 137.393 100.959 136.872 108.349H178.682C178.552 100.959 176.631 95.2686 172.919 91.2792C169.207 87.2243 164.192 85.1968 157.875 85.1968ZM162.075 177.609C144.492 177.609 130.75 172.737 120.851 162.992C110.952 153.247 106.003 139.447 106.003 121.593C106.003 103.215 110.561 89.0228 119.679 79.0164C128.862 68.9445 141.528 63.9086 157.679 63.9086C173.114 63.9086 185.13 68.3232 193.726 77.1524C202.323 85.9816 206.621 98.179 206.621 113.745V128.264H136.188C136.514 136.766 139.021 143.404 143.71 148.178C148.399 152.953 154.977 155.34 163.443 155.34C170.021 155.34 176.24 154.653 182.101 153.28C187.963 151.906 194.085 149.715 200.467 146.707V169.859C195.257 172.475 189.689 174.404 183.762 175.647C177.836 176.955 170.607 177.609 162.075 177.609Z" />
                  <path d="M257.427 177.609C244.597 177.609 234.503 172.606 227.143 162.599C219.849 152.593 216.202 138.728 216.202 121.004C216.202 103.019 219.915 89.0228 227.339 79.0164C234.828 68.9445 245.118 63.9086 258.208 63.9086C271.95 63.9086 282.435 69.2716 289.664 79.9974H290.641C289.143 71.8222 288.394 64.5299 288.394 58.1206V23H318.286V175.647H295.427L289.664 161.422H288.394C281.621 172.214 271.298 177.609 257.427 177.609ZM267.879 153.77C275.499 153.77 281.067 151.547 284.584 147.099C288.166 142.652 290.12 135.098 290.445 124.438V121.2C290.445 109.428 288.622 100.991 284.975 95.89C281.393 90.7886 275.532 88.238 267.391 88.238C260.748 88.238 255.571 91.083 251.859 96.7729C248.212 102.397 246.388 110.605 246.388 121.397C246.388 132.188 248.244 140.298 251.956 145.726C255.668 151.089 260.976 153.77 267.879 153.77Z" />
                  <path d="M431.221 175.647L422.82 137.289L411.488 88.8266H410.805L390.876 175.647H358.835L327.77 65.9688H357.467L370.069 114.529C372.088 123.228 374.139 135.229 376.223 150.533H376.809C377.07 145.562 378.209 137.682 380.228 126.89L381.791 118.552L395.272 65.9688H428.095L440.893 118.552C441.153 119.99 441.544 122.116 442.065 124.928C442.651 127.74 443.205 130.749 443.726 133.954C444.247 137.093 444.702 140.199 445.093 143.273C445.549 146.282 445.81 148.702 445.875 150.533H446.461C447.047 145.824 448.089 139.382 449.587 131.207C451.085 122.966 452.159 117.407 452.811 114.529L465.901 65.9688H495.109L463.654 175.647H431.221Z" />
                  <path d="M528.527 120.612C528.527 131.468 530.285 139.676 533.802 145.235C537.384 150.795 543.18 153.574 551.19 153.574C559.135 153.574 564.834 150.827 568.286 145.333C571.802 139.774 573.561 131.534 573.561 120.612C573.561 109.755 571.802 101.613 568.286 96.1843C564.769 90.7559 559.005 88.0418 550.995 88.0418C543.049 88.0418 537.318 90.7559 533.802 96.1843C530.285 101.547 528.527 109.69 528.527 120.612ZM604.039 120.612C604.039 138.466 599.35 152.43 589.972 162.501C580.594 172.573 567.537 177.609 550.799 177.609C540.314 177.609 531.066 175.32 523.056 170.742C515.046 166.098 508.891 159.46 504.593 150.827C500.295 142.194 498.146 132.122 498.146 120.612C498.146 102.692 502.802 88.7612 512.115 78.8202C521.428 68.8791 534.518 63.9086 551.385 63.9086C561.871 63.9086 571.118 66.1977 579.129 70.7758C587.139 75.3539 593.294 81.9267 597.592 90.4943C601.89 99.0619 604.039 109.101 604.039 120.612Z" />
                  <path d="M644.392 120.612C644.392 131.468 646.151 139.676 649.667 145.235C653.249 150.795 659.046 153.574 667.056 153.574C675.001 153.574 680.7 150.827 684.151 145.333C687.668 139.774 689.426 131.534 689.426 120.612C689.426 109.755 687.668 101.613 684.151 96.1843C680.635 90.7559 674.871 88.0418 666.86 88.0418C658.915 88.0418 653.184 90.7559 649.667 96.1843C646.151 101.547 644.392 109.69 644.392 120.612ZM719.905 120.612C719.905 138.466 715.216 152.43 705.838 162.501C696.46 172.573 683.402 177.609 666.665 177.609C656.18 177.609 646.932 175.32 638.922 170.742C630.911 166.098 624.757 159.46 620.459 150.827C616.16 142.194 614.011 132.122 614.011 120.612C614.011 102.692 618.668 88.7612 627.981 78.8202C637.294 68.8791 650.384 63.9086 667.251 63.9086C677.736 63.9086 686.984 66.1977 694.995 70.7758C703.005 75.3539 709.159 81.9267 713.458 90.4943C717.756 99.0619 719.905 109.101 719.905 120.612Z" />
                  <path d="M771.101 177.609C758.272 177.609 748.177 172.606 740.818 162.599C733.524 152.593 729.877 138.728 729.877 121.004C729.877 103.019 733.589 89.0228 741.014 79.0164C748.503 68.9445 758.793 63.9086 771.883 63.9086C785.624 63.9086 796.11 69.2716 803.338 79.9974H804.315C802.817 71.8222 802.069 64.5299 802.069 58.1206V23H831.961V175.647H809.102L803.338 161.422H802.069C795.295 172.214 784.973 177.609 771.101 177.609ZM781.554 153.77C789.174 153.77 794.742 151.547 798.259 147.099C801.841 142.652 803.794 135.098 804.12 124.438V121.2C804.12 109.428 802.296 100.991 798.649 95.89C795.068 90.7886 789.206 88.238 781.066 88.238C774.423 88.238 769.245 91.083 765.533 96.7729C761.886 102.397 760.063 110.605 760.063 121.397C760.063 132.188 761.919 140.298 765.631 145.726C769.343 151.089 774.651 153.77 781.554 153.77Z" />
                  <path d="M842.519 217.831C835.681 217.831 829.722 217.112 824.642 215.673V190.362C829.852 191.67 834.606 192.324 838.905 192.324C845.547 192.324 850.302 190.232 853.167 186.046C856.033 181.926 857.465 175.451 857.465 166.622V32.2216H887.749V166.425C887.749 183.168 883.939 195.922 876.319 204.685C868.7 213.449 857.433 217.831 842.519 217.831Z" />
                  <path d="M1000 135.818C1000 148.767 995.344 158.97 986.031 166.425C976.783 173.881 963.888 177.609 947.346 177.609C932.107 177.609 918.626 174.731 906.903 168.976V140.723C916.542 145.039 924.683 148.08 931.325 149.846C938.033 151.612 944.155 152.495 949.691 152.495C956.333 152.495 961.413 151.22 964.93 148.669C968.512 146.118 970.303 142.325 970.303 137.289C970.303 134.477 969.521 131.992 967.958 129.833C966.395 127.61 964.083 125.484 961.022 123.457C958.027 121.429 951.872 118.192 942.559 113.745C933.833 109.624 927.288 105.667 922.924 101.874C918.561 98.0809 915.077 93.6663 912.472 88.6304C909.867 83.5945 908.564 77.7083 908.564 70.972C908.564 58.2841 912.83 48.3104 921.361 41.0508C929.958 33.7912 941.81 30.1615 956.92 30.1615C964.344 30.1615 971.41 31.0444 978.118 32.8102C984.891 34.5761 991.957 37.0613 999.316 40.266L989.547 63.9086C981.928 60.7694 975.611 58.5784 970.596 57.3358C965.646 56.0932 960.762 55.4718 955.943 55.4718C950.212 55.4718 945.816 56.8126 942.755 59.494C939.694 62.1755 938.163 65.6745 938.163 69.991C938.163 72.6724 938.782 75.0269 940.02 77.0543C941.257 79.0164 943.211 80.9457 945.881 82.8424C948.616 84.6736 955.031 88.0091 965.125 92.8488C978.476 99.2581 987.626 105.7 992.576 112.175C997.525 118.584 1000 126.465 1000 135.818Z" />
                </svg>
              </div>
            </div>
          )}
          <div className="w-full lg:w-2/3 lg:pr-4">
            <p className="max-w-2xl mx-auto lg:mx-0 text-center font-light lg:text-left md:text-lg xl:text-xl mt-6 xl:leading-8 text-red-300">
              {text}
            </p>
            {links && (
              <ul className="flex flex-wrap mt-8 justify-center lg:justify-start lg:-ml-2">
                {links.map((link) => (
                  <li
                    key={`Hero - links - ${link.href}`}
                    className="px-2 whitespace-no-wrap"
                  >
                    <a href={link.href} className={link.className}>
                      {link.pointer}
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      </div>
    </>
  )
}

export default Hero
